<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="referrer" content="never">
<title>个人中心</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" />
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css" />
<style type="text/css">

.page-header{
	margin-bottom:10px;
}

/* .w-320{
	width: 320px;
	margin:auto auto;
}
 */
.mobile-head {
	background: #3B3C40 url(../images/merchant/bg_mobile_head_default.png) no-repeat 0 0;
	background-size: 100% auto;
	-webkit-background-size: 100% auto;
	height: 64px;
	margin: auto auto;
	/* border: 1px solid red; */
}

.user-head-bg {
	margin: auto auto;
	height:180px;
	/* background-color:#57B197; */
	position: relative;
}
.logo{
	position: absolute;
	right:0;
	top:0;
	border:2px solid #fff;
	width:70px;
	height:70px;
	background-color:#cccc;
	text-align: center;
	vertical-align: middle;
}
.user-head{
	padding:20px;
}
.user-head img{
	width:80px;
	height:80px;
	border:2px solid #fff;
}
.user-name{
	color:#fff;
	font-size: 10pt;
}
.user-level{
	color:#fff;
	font-size:9pt;
	padding-top:10px;
}
.money-score{
	background-color:#fff;
	padding:10px;
}
.money-score .sperate{
	color:#ccc;
	font-size:15pt;
	
}

.red-font{
	color:red;
}

.info{
	padding:5px;
	margin:auto auto;
}
.gray-blank{
	background-color: #ccc;
	height:20px;
}
.list-item{
	background-color:#fff;
}
.list-item .item{
	padding:15px;
}
.list-item .item:not(:last-child){
	border-bottom:1px solid #ccc;
}

.item span{
	float:right;
}

</style>
</head>
<body class="gray-bg">
	<div class="container">
		<div class="row" style="margin-top: 30px;">
			<div class="col-md-4">
				<div class="page-header">
					<div class="row">
						<div class="col-md-3 col-md-offset-1">
							<hr style="border-color: #ccc;">
						</div>
						<div class="col-md-4" style="padding: 10px 0 0;text-align:center;">页面展示区域</div>
						<div class="col-md-3">
							<hr style="border-color: #ccc;">
						</div>
					</div>

				</div>
				<div>
					<div class="mobile-head w-320"></div>
					<div class="user-head-bg w-320" <%-- style="background-image:url('${mpUserInfo.background }') no-repect;" --%> style="overflow: hidden;">
						<div class="logo" style="overflow: hidden;">
							<img src="${mpUserInfo.logo }" style="width: 100%;" class="logo_thumbnail"/>
						</div>
						<div class="user-head text-center">
							<img src="<%=path%>/images/merchant/avatar_default.png" class="img-circle" />
						</div>
						<div class="user-name text-center">李三丰 15001238765</div>
						<div class="user-level text-center">会员等级：金牌会员</div>
						<img class="bg_thumbnail" src="${mpUserInfo.background }" style="position: absolute; width: 100%; z-index: -99;top: 0px;">
					</div>
					<div class="money-score w-320">
						<div class="row">
							<div class="col-md-5">
							<div class="info">
								储值:<span class="red-font">3453</span>
							</div>
									
							</div>
							<div class="col-md-2">
								<div class="sperate">|</div>
							</div>
							<div class="col-md-5">
							<div class="info">
								积分:<span class="red-font">1234</span>
							</div>
							</div>
						</div>
					</div>
					<div class="gray-blank w-320">
					</div>
					
					<div class="list-item w-320">
						<div class="item">
							积分明细
							<span>&gt;</span>
						</div>
						<div class="item">
							储值明细
							<span>&gt;</span>
						</div>
						<div class="item">
							消费明细
							<span>&gt;</span>
						</div>
						<div class="item">
							我的优惠券
							<span>&gt;</span>
						</div>
						<div class="item">
							我的活动
							<span>&gt;</span>
						</div>
					</div>
					<div class="gray-blank w-320">
					</div>
					<div class="gray-blank w-320">
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="" style="background-color:#fff; margin-top:40px;padding-top:20px; padding-left:30px;padding-right:30px;padding-bottom:50px;">
					<form action="<%=basePath %>/merChant/saveUserInfo" method="post" enctype="multipart/form-data">
						<div class="row" style="margin-top:20px;">
							<div class="col-md-2" style="padding:8px;">页面地址</div>
							<div class="col-md-10">
								<a data-toggle="tooltip" title="已复制到剪切板" ></a>
								<input data-clipboard-text="${mpUserInfo.homeurl }" class="myLink form-control" value="${mpUserInfo.homeurl }" readonly="readonly"/>
							</div>
						</div>
						<div class="row" style="margin-top:20px;">
							<div class="col-md-2" style="padding:8px;">页面短链接</div>
							<div class="col-md-10">
								<a data-toggle="tooltip_short" title="已复制到剪切板" ></a>
								<input data-clipboard-text="${mpUserInfo.homeurlShort }" class="myLink_short form-control" value="${mpUserInfo.homeurlShort }" readonly="readonly"/>
							</div>
						</div>
						
						<div class="row" style="margin-top:20px;">
							<div class="col-md-2" style="padding:8px;">二维码</div>
							<div class="col-md-10 ">
								<div id="qrcode" style="margin-top: 8px;"></div>
							</div>
						</div>
						
						<div class="row" style="margin-top:20px;">
							<div class="col-md-12" style="padding:8px;">LOGO图片设置(不传默认为空)</div>
							<div class="col-md-10 col-md-offset-2">
								<img src="${mpUserInfo.logo }" class="logo_thumbnail img-thumbnail" style="width:90px;height:90px;"/>
							</div>
							<div class="col-md-10 col-md-offset-2" style="padding-top:10px;">
								<!-- <button class="btn btn-primary">上传图片</button> -->
								<input type="file" name="logo" id="logoimg" accept="image/*" style="width:150px;" onchange="javascript:setImagePreviews(this,'logo_thumbnail');" accept="image/*" />
							</div>
							<div class="col-md-10 col-md-offset-2" style="padding-top:10px;">
								请上传80*80的图片
							</div>
						</div>
						
						<div class="row" style="margin-top:20px;">
							<div class="col-md-12" style="padding:8px;">顶端区域图片设置(不传默认为空)</div>
							<div class="col-md-10 col-md-offset-2">
								<img src="${mpUserInfo.background }" class="bg_thumbnail img-thumbnail" style="width:190px;height:90px;"/>
							</div>
							<div class="col-md-10 col-md-offset-2" style="padding-top:10px;">
								<!-- <button class="btn btn-primary">上传图片</button> -->
								<input type="file" name="bg" id="bgimg" accept="image/*" style="width:150px;" onchange="javascript:setImagePreviews(this,'bg_thumbnail');" accept="image/*" />
								<div id="dd" style=" width:990px;"></div>
							</div>
							<div class="col-md-10 col-md-offset-2" style="padding-top:10px;">
								请上传320*180的图片
							</div>
						</div>
						<div class="row">
							<input type="submit" value="提交">
						</div>
					</form>
					<br><br><br><br><br><br>
				</div>
			</div>
		</div>

	</div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.js"></script>
<script type="text/javascript">
    var path = "<%=path%>";
	$(function() {
		//qrcode
		var surl = '${mpUserInfo.homeurl }';
		console.log(surl)
		$('#qrcode').qrcode({width: 100,height: 100,text: surl});
		
		var clipboard = new ClipboardJS('.myLink');
		clipboard.on('success', function(e) {
			console.log('okkk')
			$("[data-toggle='tooltip']").tooltip('show');
			clearTimeout(timer);
			var timer = setTimeout(function() {
				$("[data-toggle='tooltip']").tooltip('hide');								
			}, 1000);
        });
		
		var clipboard = new ClipboardJS('.myLink_short');
		clipboard.on('success', function(e) {
			console.log('okkk')
			$("[data-toggle='tooltip_short']").tooltip('show');
			clearTimeout(timer);
			var timer = setTimeout(function() {
				$("[data-toggle='tooltip_short']").tooltip('hide');								
			}, 1000);
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
		
		
		$.ajaxSetup({
			beforeSend : function() {
				$("#loadingModal").modal('show');
			},
			complete : function() {
				$("#loadingModal").modal('hide');
			},
			error : function() {
				$("#loadingModal").modal('hide');
			}
		});
		
	});
	function setImagePreviews(fileInput,imageTarget) {
        var docObj = fileInput;
        var fileList = docObj.files;
        var imgObjPreview = document.getElementsByClassName(imageTarget);
        if (docObj.files && docObj.files[0]) {
            for (var i = 0; i < imgObjPreview.length; i++) {
                imgObjPreview[i].src = window.URL.createObjectURL(docObj.files[0]);
            }
        }
        return true;
    }
</script>
</html>